<template>
  <div class="btnList">
    <el-tooltip
      effect="dark"
      :content="ite.label"
      placement="bottom"
      v-for="(ite, idx) in isNotMoreList.slice(0, item.showBtnNumber || 2)"
      :key="IDX + idx"
    >
      <el-button
        @click="ite.click(scope.row, scope.$index)"
        :size="ite.size"
        :disabled="ite.isDisable"
        type="text"
        v-if="isShowCurrentBtn(ite)"
      >
        <i v-if="ite.class" :class="ite.class" class="btn_i_class"></i>
        <img v-if="ite.src" :src="ite.src()" alt="" />
      </el-button>
    </el-tooltip>
    <el-popover
      style="padding-left: 8px"
      placement="bottom"
      width="136"
      trigger="click"
      popper-class="selectbtn_wrap_popper tableControlsRowPopover"
      v-if="isNotMoreList.length > (item.showBtnNumber || 2)"
    >
      <div class="selectbtn_wrap">
        <template v-for="(otherIte, otherIdx) in isNotMoreList">
          <div
            :key="otherIdx"
            v-if="
              otherIdx > (item.showBtnNumber || 2) - 1 &&
              isShowCurrentBtn(otherIte)
            "
            class="selectbtn"
            @click="otherIte.click(scope.row, scope.$index)"
          >
            <i v-if="otherIte.class" :class="otherIte.class"></i>
            <img v-if="otherIte.src" :src="otherIte.src()" alt="" />
            <span
              :style="`margin-left: 4px;color:${otherIte.color || '#4e5d78'}`"
              >{{ otherIte.label }}</span
            >
          </div>
        </template>
      </div>

      <el-button slot="reference" type="text">
        <img
          class="icon16 pointer"
          src="@/assets/images/my_strategy/icon_more.svg"
        />
      </el-button>
    </el-popover>
  </div>
</template>

<script>
export default {
  name: "ControlsRow",
  data() {
    return {}
  },
  props: {
    // 传入column
    item: {
      type: Object,
      default: () => ({
        list: [],
      }),
    },
    // 表格row对象
    scope: {
      required: true,
    },
    // 列索引
    IDX: {
      type: Number,
    },
  },
  computed: {
    isNotMoreList() {
      let allShowArr = this.item.list.filter(item => {
        if (typeof item.vIf === "boolean") {
          return item.vIf
        } else if (typeof item.vIf === "function") {
          return item.vIf(this.scope.row, this.scope.$index)
        } else {
          return true
        }
      })
      return allShowArr
    },
    isShowCurrentBtn() {
      return item => {
        if (item.hasOwnProperty("vIf")) {
          if (typeof item.vIf === "boolean") {
            return item.vIf
          } else if (typeof item.vIf === "function") {
            return item.vIf(this.scope.row, this.scope.$index)
          } else {
            console.warn(
              "type 为button 的表格项中的vIf 必须是一个函数或布尔值！"
            )
          }
        } else {
          // 没有 vIf 默认显示
          return true
        }
      }
    },
  },
}
</script>

<style lang="less" scoped>
.btnList {
  display: inline-block;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  /deep/.el-button {
    padding: 0 !important;
  }
}
.selectbtn_wrap_popper {
  .selectbtn_wrap {
    display: flex;
    width: 100%;
    flex-direction: column;
    text-align: center;
    align-items: center;
    .selectbtn {
      height: 40px;
      width: 100%;
      font-weight: 400;
      font-size: 14px;
      line-height: 40px;
      color: #4e5d78;
      display: block;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      box-sizing: border-box;
      padding-left: 15px;
    }
    .selectbtn:hover {
      background: #fafafa;
    }
  }
}
</style>

<style lang="less">
.el-popover__reference-wrapper {
  display: inline-block;
}
.tableControlsRowPopover.el-popover {
  margin-top: 0 !important;
  padding: 12px 0 !important;
}
.btn_i_class {
  font-size: 18px !important;
}
</style>
